<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" :autoBack="true" title="选择地址" placeholder
			:bgColor="'rgba(255,255,255,'+opc+')'">

		</u-navbar>
		<view class="pagecon">
			<view class="box" v-for="(item,index) in addrlist" :key="index">
				<view class="box__addrbox">
					<image src="/static/goods/addr.png" class="box__addrbox__icon" mode=""></image>
					<view class="" style="flex: 1;">
						<view class="box__addrbox__addr">
							{{item.province+item.city+item.area}}{{item.detail}}
						</view>
						<view class="box__addrbox__name">
							{{item.username}} {{item.mobile}}
						</view>
					</view>
				</view>
				<view class="box__footer">
					<view class="u-flex u-flex-y-center" style="flex: 1;" @tap.stop="iconClickHandler(item)" >
						<view class="checkbox" :class="item.is_default==1?'activecheckbox':''">
							<u-icon class="" name="checkbox-mark" size="24rpx" color="#ffffff" />
						</view>
						<view class="box__footer__text">
							默认地址
						</view>
					</view>
					<view class="u-flex u-flex-y-center" @click="edit(item)">
						<image src="/static/personal/edit.png" class="box__footer__icon" mode="" style="margin-left: 40rpx;"></image>
						<view class="box__footer__text">
							编辑
						</view>
					</view>
					<view class="u-flex u-flex-y-center" @click="del(item)">
						<!-- <image src="/static/personal/edit.png" class="box__footer__icon" mode="" style="margin-left: 40rpx;"></image> -->
						<u-icon name="trash" style="margin-left: 40rpx;" size="22"></u-icon>
						<view class="box__footer__text">
							删除
						</view>
					</view>
					<view class="u-flex u-flex-y-center" @click="choose(item.id)">
						<u-icon name="checkmark" style="margin-left: 40rpx;" size="22" ></u-icon>
						<view class="box__footer__text" >
							选择
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;">

		</view>
		<view class="footer">
			<u-button text="新增地址" color="#E3432D" size="largin"
				customStyle="height:95rpx;border-radius:20rpx;font-size:30rpx;width:638rpx;margin:0;"
				@click="add"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		ourAddress,
		defaultAddress,
		deleteAddress,
		setDefaultAddress
	} from "@/request/api/address.js"
	export default {
		data() {
			return {
				opc: 0,
				addrlist: [],

			};
		},
		onPageScroll(e) {
			if (e.scrollTop == 0) {
				this.opc = 0
			} else {
				this.opc = 1
			}
		},
		onShow() {
			// defaultAddress().then(res => {
			// 	console.log(res)
			// })
			// ourAddress({
			// 	pageSize: 999
			// }).then(res => {
			// 	this.addrlist = res.data.data;
			// })
			console.log(123)
			ourAddress({
				pageSize: 999
			}).then(res11 => {
				this.addrlist = res11.data.data;
				defaultAddress().then(res1 => {
					if(!res1.data){
						if(this.addrlist.length>0){
							setDefaultAddress({id:this.addrlist[0].id}).then(res2=>{
								ourAddress({
									pageSize: 999
								}).then(res3 => {
									this.addrlist = res3.data.data;
								})
							})
						}
					}
				})
			})
		},
		methods: {
			choose(id){
				uni.setStorageSync("chooseId",id)
				uni.navigateBack()
			},
			add() {
				uni.navigateTo({
					url: "/pages/address/add"
				})
			},
			edit(item) {
				uni.navigateTo({
					url: "/pages/personal/editaddr?id="+item.id
				})
			},
			setAdd(id){
				setDefaultAddress({id}).then(res=>{
					ourAddress({
						pageSize: 999
					}).then(res => {
						this.addrlist = res.data.data;
					})
				})
			},
			iconClickHandler(item) {
				this.setAdd(item.id)
				// this.addrlist.map(t => {
				// 	t.isdefult = false
				// })
				// item.isdefult = true
				// this.$forceUpdate()
			},
			del(item) {
				let _this = this
				if(this.addrlist.length==1){
					uni.showToast({
						icon:"none",
						title:"请保留至少一个地址"
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定要删除该地址？',
					success(r) {
						if (r.confirm) {
							// _this.addrlist.splice(index, 1)
							deleteAddress({
								id: item.id
							}).then(res => {
								console.log(res)
								uni.$u.toast('删除成功')
								ourAddress({
									pageSize: 999
								}).then(res11 => {
									_this.addrlist = res11.data.data;
									defaultAddress().then(res1 => {
										if(!res1.data){
											if(_this.addrlist.length>0){
												setDefaultAddress({id:_this.addrlist[0].id}).then(res2=>{
													ourAddress({
														pageSize: 999
													}).then(res3 => {
														_this.addrlist = res3.data.data;
													})
												})
											}
										}
									})
								})
								
								
							})
						}


					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		width: 100vw;
		display: flex;
		justify-content: center;
		padding-bottom: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
	}

	.pagecon {
		padding: 30rpx;

		.box {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 29rpx;
			padding: 28rpx 33rpx 40rpx 20rpx;

			&__addrbox {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				&__icon {
					width: 36rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				&__addr {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #232323;
					line-height: 46rpx;
				}

				&__name {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #747474;
					line-height: 46rpx;
				}
			}

			&__footer {
				display: flex;
				align-items: center;

				&__text {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #565656;
					line-height: 24rpx;
					flex: 1;
				}

				&__icon {
					width: 26rpx;
					height: 26rpx;
					margin: 0 10rpx 0 100rpx;
				}

			}
		}

	}

	.checkbox {
		width: 30rpx;
		height: 30rpx;
		background: #fff;
		border: 2rpx solid rgba(86, 86, 86, .6);
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.activecheckbox {
		border-color: #09c949;
		background: #09c949;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>